<template>
	<view class="center-order-itemList">
		<!-- 单个食物盒子 -->
		<view class="item" v-for="(item,index) in orderInfoList" :key="index">
			<!-- 图片 -->
			<image :src="item.imgSrc" mode=""></image>
			<!-- 信息 -->
			<view class="item-info">
				<span class="title">
					{{item.dish}}
				</span>
				<span class="content">
					{{item.degree}}
				</span>
				<span class="number">
					X{{item.quantity}}
				</span>
			</view>
			<span class='right-rich'>￥{{item.price}}</span>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'OrderList',
		props: {
			orderInfoList: {
				type: Array,
				default: () => {
					return []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 中间食物栏
	.center-order-itemList {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			// 最后一个元素没有下虚线
			&:not(:last-child)::after {
				position: absolute;
				content: "";
				display: block;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				width: 90%;
				height: 0rpx;
				// background-color: $divider;
				border-bottom: 1rpx dashed $divider;
			}

			image {
				margin-left: 20rpx;
				width: 200rpx;
				height: 140rpx;
				border-radius: 12rpx;
				overflow: hidden;
			}

			.item-info {
				position: relative;
				padding-left: 14rpx;
				width: 400rpx;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				.title {
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 30rpx;
					font-weight: 500;
					color: $main-text;
				}

				.content {
					width: 100%;

					margin-left: -2rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: $list-content;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 这里是超出几行省略 */
				}

				.number {
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: 4rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: $list-content;
				}


			}

			.right-rich {
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28rpx;
				font-weight: 400;
				color: $main-text;
			}
		}
	}
</style>
